import React, { Component } from 'react';
import {Link,NavLink} from 'react-router-dom';
import { connect } from "react-redux";
import { Toast } from 'react-weui';

import * as actions from '../../store/action/my';
import '../../static/css/common.less';
import './my.less';

class My extends Component {

    //es7 的写法
    state = {
        sign : {
            display : 'none'
        }
    }
    //退出登陆
    logout = () =>{
        localStorage.setItem('token', '');
        //判断是否登陆
        this.isLogin();
    }
    //判断是否登陆
    isLogin = () => {
        if(!localStorage.getItem('token')){
            this.props.history.push('/glogin')
        }
    }

    //节点加载前
    componentWillMount() {
        //判断是否登陆
        this.isLogin();

        if(!this.props.my.fetched){
            //因为在此进行了订阅，所以以后如果仓库中的状态发生改变的话就会让组件重新渲染
             this.props.fetchUser();
        }
    }
    //签到
    signClick = () =>{
        //签到
        this.props.postSign();
        this.setState({sign : {display : 'block' }});
    }

    //隐藏签到
    hideSign = () =>{
        this.setState({sign : {display : 'none' }});
        this.props.fetchUser();
    }

    render() {
        return (
            <div>
                {/* <Toast icon="loading" show={this.props.my.fetching}>Loading...</Toast> */}
                <div className="detail-region-my">
                    <section>
                       <div className="header-info">
                            <img src={require('../../static/images/header-info.png')}></img>
                            <Link to="/personal">
                                <img className="pic" src={this.props.my.user.avatar}></img>
                                <div className="header-name">昵称：{this.props.my.user.nickname}</div>
                                <div className="header-num">积分：{this.props.my.user.scores}</div>
                            </Link>
                            {this.props.my.user.has_sign_in == 0 ?
                                <div className="header-sign" onClick={this.signClick}>
                                    <p className="yes"><img src={require('../../static/images/yes.png')}></img></p>
                                    <p className="sign">签到</p>
                                </div>
                                : 
                                <div className="header-sign">
                                    <p className="yes"><img src={require('../../static/images/yes.png')}></img></p>
                                    <p className="sign-in">已签到</p>
                                </div>
                            }
                       </div>
                       <div className="item-select">
                            <div class="item">
                                <NavLink to="/recharge">
                                    <img src={require('../../static/images/p1.png')}></img>
                                    <div className="info">积分充值</div>
                                </NavLink>
                            </div>
                            <div class="item">
                                <Link to="/exchangeRecord">
                                    <img src={require('../../static/images/p2.png')}></img>
                                    <div className="info">订单记录</div>
                                </Link>
                            </div>
                            <div class="item">
                                <Link to="/browse">
                                    <img src={require('../../static/images/p3.png')}></img>
                                    <div className="info">浏览足迹</div>
                                </Link>
                            </div>
                            <div class="item">
                                <Link to="/collection">
                                <img src={require('../../static/images/p4.png')}></img>
                                <div className="info">收藏记录</div>
                                </Link>
                            </div>
                       </div>
                       <div className="item-content">
                            <Link to="/myMessage">
                            <div className="item">
                                
                                <div className="left-item"><img src={require('../../static/images/info1.png')}></img>消息记录</div>
                                <img src={require('../../static/images/right.png')} class="right-ico"></img>
                            </div>
                            </Link>
                            <Link to="/personal">
                            <div className="item">
                                    <div className="left-item"><img src={require('../../static/images/info2.png')}></img>个人信息</div>
                                    <img src={require('../../static/images/right.png')} class="right-ico"></img>                            
                            </div>
                            </Link>
                            <Link to="/money">
                            <div className="item">
                                    <div className="left-item"><img src={require('../../static/images/cash.png')}></img>提现</div>
                                    <img src={require('../../static/images/right.png')} class="right-ico"></img>                            
                            </div>
                            </Link>
                            <Link to="/help">
                            <div className="item">
                                <div className="left-item"><img src={require('../../static/images/info3.png')}></img>帮助与反馈</div>
                                <img src={require('../../static/images/right.png')} class="right-ico"></img>         
                            </div>
                            </Link>
                            <Link to="/aboutApp">
                            <div className="item">
                                <div className="left-item"><img src={require('../../static/images/info4.png')}></img>关于</div>
                                <img src={require('../../static/images/right.png')} className="right-ico"></img>
                            </div>
                            </Link>
                       </div>
                       <button className="submit-btn" onClick={this.logout}>退出登录</button>
                    </section>

                    <div className="success-region" style={this.state.sign}>
                        <div className="success-content">
                            <img src={require('../../static/images/sign.png')}></img>
                            <div className="success-info">+10积分</div>
                            <div className="success-confirm"  onClick={this.hideSign}>确认</div>
                        </div>
                        <div className="success-close"><img src={require('../../static/images/close.png')}  onClick={this.hideSign}></img></div>
                    </div>
                </div>
            </div>
        )
    }
}

//把组件和store关联在一起
export default connect((state)=>{return {...state}}, actions)(My);